<script lang="ts" setup>
import { ref, shallowRef, watch } from 'vue';

import { useAppConfig } from '@vben/hooks';
import { useAccessStore } from '@vben/stores';

import { notification } from 'ant-design-vue';

import { formatFilePath } from '#/utils';

const props = withDefaults(
  defineProps<{
    // 编辑区高度
    height?: string;
    mode?: 'default' | 'simple';
    modelValue: string;
    placeholder?: string;
  }>(),
  {
    height: '420px',
    mode: 'simple',
    placeholder: '请输入内容...',
    modelValue: '',
  },
);
const emits = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();
const { baseURL } = useAppConfig(import.meta.env, import.meta.env.PROD);

const content = ref('');
const editorRef = shallowRef();
const accessStore = useAccessStore();
function formatToken(token: null | string) {
  return token ? `Bearer ${token}` : null;
}
const onServerResponsePrepare = (res: any) => {
  if (res?.state === 'SUCCESS' && res?.url) {
    res.url = formatFilePath(res.url);
  }
  return res;
};

// 获取环境变量路径
// const baseUrl = import.meta.env.DEV ? '/UEditorPlus/' : '/static/js/ueditor/';
// 富文本配置
const editorConfig = {
  initialFrameWidth: null, // 设置null则宽度自适应
  initialFrameHeight: 320, // 区域内容高度
  autoHeightEnabled: false, // 固定高度且带滚动条
  autoSyncData: false,
  autoFloatEnabled: true,
  UEDITOR_HOME_URL: '/static/js/ueditor/',
  UEDITOR_CORS_URL: '/static/js/ueditor/',
  serverUrl: `${baseURL}/user/ueditor/upload`,
  loadConfigFromServer: false,
  // 配合最新编译的资源文件，自定义Request Headers
  serverHeaders: {
    Authorization: formatToken(accessStore.accessToken),
    'XX-Device-Type': 'web',
  },
  serverResponsePrepare: onServerResponsePrepare,
  tipError: (msg: string) => {
    notification.error({ message: '编辑器错误', description: msg });
  },
  toolbars: [
    [
      'undo',
      'redo',
      'bold',
      'italic',
      'underline',
      'strikethrough',
      'forecolor',
      'backcolor',
      'pasteplain',
      'selectall',
      'cleardoc',
      'fontfamily',
      'fontsize',
      'paragraph',
      'justifyleft',
      'justifycenter',
      'justifyright',
      'justifyjustify',
      'link',
      'unlink',
      'insertimage',
      'insertorderedlist',
      'insertunorderedlist',
      'blockquote',
      'inserttable',
      'horizontal',
    ],
  ],
};

watch(
  () => content.value,
  (value) => {
    if (value) {
      emits('update:modelValue', value);
    }
  },
  {
    deep: true,
    immediate: true,
  },
);

watch(
  () => props.modelValue,
  (value) => {
    if (value) {
      content.value = value;
    }
  },
  {
    deep: true,
    immediate: true,
  },
);
</script>

<template>
  <VueUeditorWrap
    ref="editorRef"
    v-model="content"
    :config="editorConfig"
    :editor-dependencies="['ueditor.config.js', 'ueditor.all.js']"
  />
</template>

<style lang="scss">
.edui-editor,
.edui-default {
  color: hsl(var(--muted-foreground)) !important;

  .edui-button-body,
  .edui-shortcutmenu,
  .edui-editor-toolbarboxinner {
    background-color: hsl(var(--background)) !important;
  }

  .edui-toolbar {
    .edui-combox .edui-combox-body,
    .edui-combox .edui-combox-body > div,
    .edui-splitbutton-body .edui-arrow,
    .edui-default .edui-toolbar .edui-menubutton-body .edui-arrow {
      background-color: hsl(var(--background)) !important;
      // border: 1px solid hsl(var(--background)) !important;
    }
  }
}
</style>
